<template>
  <el-dialog
    :title="title"
    :model-value="visible"
    :width="width"
    :fullscreen="fullscreen"
    :modal="modal"
    :draggable="draggable"
    :close-on-click-modal="closeOnClickModal"
    @close="handleClose"
    v-bind="$attrs"
  >
    <!-- 弹窗内容 -->
    <div
      v-loading="loading"
      class="dialog-content"
    >
      <slot />
    </div>

    <!-- 底部按钮 -->
    <template #footer>
      <slot name="footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
          :loading="confirmLoading"
        >
          {{ confirmText }}
        </el-button>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  withDefaults(
    defineProps<{
      // 弹窗标题
      title?: string
      // 显示状态（双向绑定）
      visible: boolean
      // 宽度
      width?: string
      // 是否全屏
      fullscreen?: boolean
      // 是否显示遮罩
      modal?: boolean
      // 是否可拖拽
      draggable?: boolean
      // 点击遮罩是否关闭
      closeOnClickModal?: boolean
      // 确认按钮文本
      confirmText?: string
      // 内容加载状态
      loading: boolean
      // 确认按钮加载状态
      confirmLoading?: boolean
    }>(),
    {
      loading: false,
    },
  )

  const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void
    (e: 'confirm'): void
    (e: 'cancel'): void
    (e: 'close'): void
  }>()

  // 关闭弹窗
  const handleClose = () => {
    emit('update:visible', false)
    emit('close')
  }

  // 取消按钮
  const handleCancel = () => {
    emit('update:visible', false)
    emit('cancel')
  }

  // 确认按钮
  const handleConfirm = () => {
    emit('confirm')
  }
</script>

<style scoped>
  .dialog-content {
    min-height: 80px;
  }
</style>
